<template>
    <view class="chat-container">
        <scroll-view class="chat-content" :style="{ height: state.scrollViewHeight + 'px' }" :scroll-y="true"
            :scroll-top="state.scrollTop" :scroll-with-animation="true">
            <!-- 聊天消息列表 -->
            <view class="scroll-view-content">
                <view class="message-item" v-for="(message, index) in state.messages" :key="index"
                    :class="{ 'message-left': message.sender === 'me', 'message-right': message.sender !== 'me' }">
                    <view class="message-avatar"
                        :style="{ marginLeft: message.sender === 'me' ? '20rpx' : 0, marginRight: message.sender !== 'me' ? '20rpx' : 0 }">
                        <image :src="message.sender === 'me' ? state.avatarMe : state.avatarThem" />
                    </view>
                    <view class="name"
                        :style="{ left: message.sender !== 'me' ? '82rpx' : 0, right: message.sender === 'me' ? '82rpx' : 0, textAlign: message.sender === 'me' ? 'right' : 'left' }">
                        {{ message.name }}</view>
                    <view class="message-text-wrapper"
                        :style="{ backgroundColor: message.sender === 'me' ? '#388095' : '#fff' }">
                        <text class="message-text" :style="{ color: message.sender === 'me' ? '#fff' : '#000' }">{{
                            message.text }}</text>
                        <!-- <text class="message-time">{{ message.time }}</text> -->
                    </view>

                </view>
            </view>
        </scroll-view>

        <!-- 				-->
        <view class="chat-input dispaly-center">
            <input type="text" :focus="state.focus" v-model="state.newMessage" @focus="scrollToBottom"
                @confirm="sendMessage" class="ipt" placeholder="输入消息..." />
            <view class="right dispaly-center">
                <view class="icon">
                    <image src="/static/icon/emoji.png" />
                </view>
                <view class="icon">
                    <image src="/static/icon/add.png" />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, onMounted, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const state = reactive({
    messages: [], // 初始为空数组
    newMessage: '', // 用户输入的消息
    avatarMe: '/static/test.jpg', // 我的头像
    avatarThem: '/static/logo.png', // 对方的头像
    currentTime: new Date().toLocaleTimeString(), // 当前时间
    scrollViewHeight: 633,
    scrollTop: 0,
    focus: true
});

onLoad((option) => {
    uni.setNavigationBarTitle({
        title: '我的好友' + option.name
    });
});

// 发送消息
function sendMessage() {
    if (state.newMessage.trim()) {
        // 添加新消息到列表，并设置发送者和时间
        state.messages.push({
            name: '多多',
            sender: 'me',
            text: state.newMessage,
            time: getFormattedTime() // 调用方法获取格式化后的时间
        });

        // 发送消息后清空输入框
        state.newMessage = '';
        // 滚动到最新消息
        scrollToBottom();
    }
}

// 获取当前时间
function getFormattedTime() {
    // 你可以根据自己的需求格式化时间
    return new Date().toLocaleTimeString();
}

// 滚动页面到底部
function scrollToBottom() {
    state.scrollTop = 0;
    // 滚动到聊天内容的底部
    nextTick(() => {
        let view = uni.createSelectorQuery().select('.scroll-view-content');
        view.boundingClientRect((res) => {
            let top = res.height - state.scrollViewHeight;
            if (top > 0) {
                state.scrollTop = top;
            }
            console.log(state.scrollTop, 'xx');
        }).exec();
    });
}

onMounted(() => {
    for (var i = 0; i < 5; i++) {
        state.messages.push(
            {
                name: '人机',
                sender: 'them',
                text: 'Hello, how are you?',
                time: '10:00'
            },
            {
                name: '人机',
                sender: 'them',
                text: 'lol',
                time: getFormattedTime() // 调用方法获取格式化后的时间
            },
            {
                name: '人机',
                sender: 'them',
                text: 'hello',
                time: getFormattedTime() // 调用方法获取格式化后的时间
            }
        );
    }
    scrollToBottom();
});
</script>

<style>
page {
    background-color: #f4f4f6;
}
</style>

<style lang="scss" scoped>
.chat-input {
    width: 100%;
    // height: 170rpx;
    background: #ffffff;
    padding: 14rpx 30rpx 85rpx 30rpx;

    .ipt {
        background: #f6f6f6;
        border-radius: 8rpx;
        width: 690rpx;
        height: 80rpx;
        padding-left: 20rpx;
        margin-right: 19rpx;
    }
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
}

.chat-content {
    padding: 10rpx 24rpx;
    flex: 1;
    overflow-y: auto;
    padding: 10rpx;
    box-sizing: border-box;
    // height: 1266rpx;
}

.message-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;
}

.message-left {
    flex-direction: row-reverse;
    // text-align: left;
}

.message-avatar {}

image {
    width: 82rpx;
    height: 82rpx;
    border-radius: 50%;
}

.message-left .message-avatar {
    // margin-right: 15rpx;
    /* Override for left messages */
}



.message-text-wrapper {
    // flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 20rpx 23rpx;
    // margin-left: -40rpx;
    /* For right messages */
    // margin-right: 30rpx;
    /* For left messages */
    max-width: 40%;
    border-radius: 20rpx;
    margin-top: 40rpx;
}

.name {
    position: absolute;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #9E9E9E;
    margin: 0 20rpx 15rpx 20rpx;
}


.message-left .message-text-wrapper {
    margin-left: 0;
    /* Override for left messages */
}

.message-text {
    word-wrap: break-word;
}

.message-left .message-text {}

.message-time {
    position: relative;
    font-size: 12rpx;
    color: #999;
    margin-top: 5rpx;
}

.right {

    .icon:first-child {
        margin-right: 25rpx;
    }

    .icon {
        image {
            width: 42rpx;
            height: 42rpx;
        }
    }
}

/* Rest of the styles... */
</style>
